<template>
  <div class="dashboard-editor-container">
    <div class="button-group">
      <el-button
        type="primary"
        :class="{ 'is-active': report.dateUnit === '日' }"
        @click="changeToDay"
      >日</el-button>
      <el-button
        type="primary"
        :class="{ 'is-active': report.dateUnit === '周' }"
        @click="changeToWeek"
      >周</el-button>
      <el-button
        type="primary"
        :class="{ 'is-active': report.dateUnit === '月' }"
        @click="changeToMonth"
      >月</el-button>
    </div>
    <div class="panel-card">
      <panel-group :chart-data="report"/>
    </div>
    <div class="table-card">
      <el-row>
        <TableComponent :table-data="tableData"></TableComponent>
      </el-row>
    </div>
  </div>
</template>

<script>
import PanelGroup from './PanelGroup.vue'
import TableComponent from './table.vue'
import {getThisMonthTraffic, getThisWeekTraffic, getTodayTraffic} from "@/api/jihuo/report";

export default {
  name: 'Index',
  components: {
    PanelGroup,
    TableComponent,
  },
  data() {
    return {
      report: {
        successTotal: 0,
        failTotal: 0,
        dateUnit: "日"
      },
      tableData: [] // 定义表格数据
    }
  },
  mounted() {
    getTodayTraffic().then(resp => {
      // 假设 resp.rows 也可以作为表格的数据
      this.tableData = resp.rows;
      // 计算 successTotal 和 failTotal
      this.tableData.forEach((item) => {
        this.report.successTotal += item.successNum;
        this.report.failTotal += item.failNum;
      });
    });
  },
  methods: {
    changeToWeek() {
      this.resetReport();
      getThisWeekTraffic().then(resp => {
        this.updateReport(resp, "周");
      });
    },
    changeToMonth() {
      this.resetReport();
      getThisMonthTraffic().then(resp => {
        this.updateReport(resp, "月");
      });
    },
    changeToDay() {
      this.resetReport();
      getTodayTraffic().then(resp => {
        this.updateReport(resp, "日");
      });
    },
    resetReport() {
      this.report.successTotal = 0;
      this.report.failTotal = 0;
      this.tableData = [];
    },
    updateReport(resp, dateUnit) {
      this.tableData = resp.rows;
      this.tableData.forEach((item) => {
        this.report.successTotal += item.successNum;
        this.report.failTotal += item.failNum;
      });
      this.report.dateUnit = dateUnit;
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: #f0f2f5;
  min-height: 100vh;
  box-sizing: border-box;

  .button-group {
    margin-bottom: 24px;
    text-align: center;

    .el-button {
      margin: 0 8px;
      border-radius: 20px;
      min-width: 60px;
      font-weight: 500;
      transition: background 0.2s, color 0.2s;
      &.is-active, &:focus, &:hover {
        background: #409EFF;
        color: #fff;
        border-color: #409EFF;
      }
    }
  }

  .panel-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 24px 24px 8px;
    margin-bottom: 32px;
  }

  .table-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    padding: 24px;
    margin-top: 16px;
  }
}

@media (max-width: 1024px) {
  .dashboard-editor-container {
    padding: 12px;
    .panel-card, .table-card {
      padding: 10px;
      margin-bottom: 16px;
    }
  }
}
</style>
